{% block content %}
<div id="app" class="character-form-container">
    <el-card>
        <template #header>
            <div class="card-header">
                <h2>{{ isEditMode ? '编辑' : '创建' }}角色</h2>
            </div>
        </template>

        <form @submit.prevent="submitForm">
            <el-tabs type="border-card">
                <!-- 基本信息 -->
                <el-tab-pane label="基本信息">
                    <el-form label-position="right" label-width="120px">
                        <el-form-item label="角色名称" required>
                            <el-input 
                                v-model="formData.name"
                                placeholder="请输入角色名称">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="角色描述">
                            <el-input 
                                type="textarea"
                                v-model="formData.description"
                                :rows="3"
                                placeholder="请输入角色描述">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <!-- 基础属性 -->
                <el-tab-pane label="基础属性">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="体质">
                                <el-input-number 
                                    v-model="formData.constitution"
                                    :min="1"
                                    :max="100">
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="力量">
                                <el-input-number 
                                    v-model="formData.strength"
                                    :min="1"
                                    :max="100">
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="精神">
                                <el-input-number 
                                    v-model="formData.spirit"
                                    :min="1"
                                    :max="100">
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="智力">
                                <el-input-number 
                                    v-model="formData.intelligence"
                                    :min="1"
                                    :max="100">
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="幸运">
                                <el-input-number 
                                    v-model="formData.luck"
                                    :min="1"
                                    :max="100">
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>

                <!-- 其他属性和状态 -->
                <!-- 保持不变 -->
            </el-tabs>

            <div class="form-actions">
                <el-button type="primary" native-type="submit">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </form>
    </el-card>
</div>
{% endblock %}

{% block extra_js %}
<script>
import { ElMessage } from 'element-plus';

const { createApp, ref } = Vue;

const app = createApp({
    data() {
        return {
            isEditMode: {{ form.instance.pk|yesno:"true,false" }},
            formData: {
                name: '{{ form.instance.name|default:"" }}',
                description: '{{ form.instance.description|default:"" }}',
                constitution: {{ form.instance.constitution|default:10 }},
                strength: {{ form.instance.strength|default:10 }},
                spirit: {{ form.instance.spirit|default:10 }},
                intelligence: {{ form.instance.intelligence|default:10 }},
                luck: {{ form.instance.luck|default:10 }},
                max_hp: {{ form.instance.max_hp|default:100 }},
                max_mp: {{ form.instance.max_mp|default:100 }},
                physical_armor: {{ form.instance.physical_armor|default:0 }},
                magic_armor: {{ form.instance.magic_armor|default:0 }},
                block_value: {{ form.instance.block_value|default:0 }},
                damage_reduction: {{ form.instance.damage_reduction|default:0 }},
                damage_reduction_percentage: {{ form.instance.damage_reduction_percentage|default:0 }},
                shield_value: {{ form.instance.shield_value|default:0 }},
                damage_bonus: {{ form.instance.damage_bonus|default:0 }},
                damage_bonus_percentage: {{ form.instance.damage_bonus_percentage|default:0 }},
                armor_penetration: {{ form.instance.armor_penetration|default:0 }},
                crit_rate: {{ form.instance.crit_rate|default:0 }},
                crit_damage: {{ form.instance.crit_damage|default:0 }},
                life_steal: {{ form.instance.life_steal|default:0 }},
                healing_bonus: {{ form.instance.healing_bonus|default:0 }},
                healing_bonus_percentage: {{ form.instance.healing_bonus_percentage|default:0 }},
                movement_speed: {{ form.instance.movement_speed|default:0 }},
                attack_range: {{ form.instance.attack_range|default:0 }},
                flying_height: {{ form.instance.flying_height|default:0 }},
                current_hp: {{ form.instance.current_hp|default:0 }},
                current_mp: {{ form.instance.current_mp|default:0 }},
                current_hp_regen: {{ form.instance.current_hp_regen|default:0 }},
                current_physical_armor: {{ form.instance.current_physical_armor|default:0 }},
                current_magic_armor: {{ form.instance.current_magic_armor|default:0 }},
                current_block_value: {{ form.instance.current_block_value|default:0 }}
            }
        }
    },
    methods: {
        submitForm() {
            const url = this.isEditMode ? `/api/characters/${this.formData.id}/` : '/api/characters/';
            const method = this.isEditMode ? 'PUT' : 'POST';

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify(this.formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    ElMessage.success('保存成功');
                    window.location.href = "/characters/";
                } else {
                    ElMessage.error('保存失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                ElMessage.error('提交失败，请重试');
            });
        },
        cancel() {
            window.location.href = "/characters/";
        }
    }
});

app.use(ElementPlus);
app.mount('#app');
</script>
{% endblock %} 